<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        {# 课程 #}
        <div class="columns is-multiline box">
            <div class="column is-full box has-background-primary">
                <h3 class="title is-3">推荐课程</h3>
            </div>
            {# 课程列表 #}
            <div class="column is-full">
                <div class="columns is-multiline">
                    {# 课程列表 #}
                    {% for course in courses %}
                        <div class="column is-3-desktop">
                            <div class="card">
                                <div class="card-image">
                                    <a href="{% url 'courses:home' course.id %}">
                                        <figure class="image is-16by9">
                                            <img src="{{ MEDIA_URL }}{{ course.image }}"
                                                 alt="Placeholder image">
                                        </figure>
                                    </a>
                                </div>
                                <div class="card-content has-background-primary">
                                    <div class="media">
                                        <div class="media-content has-text-centered">
                                            {# 课程名 #}
                                            <p class="title is-3 has-text-white">
                                                <a href="{% url 'course:home' course.id %}"
                                                   class="has-text-link-light">
                                                    {{ course.name }}
                                                </a>
                                            </p>
                                            <hr>
                                            {# 课程信息 #}
                                            <div class="columns is-multiline">
                                                {# 课程时长 #}
                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        课&nbsp;程&nbsp;时&nbsp;长
                                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                                        ：{{ course.learn_times }}
                                                                    </strong>
                                                                </span>
                                                </div>
                                                {# 学生数 #}
                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        学&nbsp;生&nbsp;数
                                                                        <i class="fa fa-address-card"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.students }}
                                                                    </strong>
                                                                </span>
                                                </div>
                                                {# 收藏数 #}
                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        收&nbsp;藏&nbsp;数
                                                                        <i class="fa fa-star" aria-hidden="true"></i>
                                                                        ：{{ course.fav_nums }}
                                                                    </strong>
                                                                </span>
                                                </div>
                                                {# 难度 #}
                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        难&nbsp;&nbsp;度
                                                                        <i class="fa fa-google-wallet"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.get_degree_display }}
                                                                    </strong>
                                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <hr class="hr-style">
        <br>
        {# 机构 #}
        <div class="columns is-multiline box">
            <div class="column is-full box has-background-primary">
                <h3 class="title is-3">推荐机构</h3>
            </div>
            {# 机构列表 #}
            <div class="column is-full">
                <div class="columns is-multiline">
                    {# 机构列表 #}
                    {% for org in course_orgs %}
                        <div class="column is-3-desktop">
                            <div class="card">
                                <div class="card-image">
                                    <a href="{% url 'org:home' org.id %}">
                                        <figure class="image is-16by9">
                                            <img src="{{ MEDIA_URL }}{{ org.org_logo }}"
                                                 alt="Placeholder image">
                                        </figure>
                                    </a>
                                </div>
                                <div class="card-content has-background-success">
                                    <div class="media">
                                        <div class="media-content has-text-centered">
                                            {# 机构名 #}
                                            <p class="title is-3 has-text-white">
                                                <a href="{% url 'org:home' org.id %}" class="has-text-link-light">
                                                    {{ org.name }}
                                                </a>
                                            </p>
                                            <hr>
                                            {# 机构信息 #}
                                            <div class="columns is-multiline">
                                                {# 课程数 #}
                                                <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        课&nbsp;程&nbsp;数
                                                        <i class="fa fa-book" aria-hidden="true"></i>
                                                        ：{{ org.course_num }}
                                                    </strong>
                                                </span>
                                                </div>
                                                {# 学生数 #}
                                                <div class="column is-full">
                                            <span>
                                                <strong class="has-text-white">
                                                    学&nbsp;生&nbsp;数
                                                    <i class="fa fa-address-card" aria-hidden="true"></i>
                                                    ：{{ org.students }}
                                                </strong>
                                            </span>
                                                </div>
                                                {# 收藏数 #}
                                                <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        收&nbsp;藏&nbsp;数
                                                        <i class="fa fa-star" aria-hidden="true"></i>
                                                        ：{{ org.fav_nums }}
                                                    </strong>
                                                </span>
                                                </div>
                                                {# 机构地址 #}
                                                <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        地&nbsp;址
                                                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                        ：{{ org.address }}
                                                    </strong>
                                                </span>
                                                </div>
                                                {# 经典课程 #}
                                                <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        经&nbsp;典&nbsp;课&nbsp;程
                                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                                        ：C++从入门到精通
                                                    </strong>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <hr class="hr-style">
        <br>
        {# 讲师 #}
        <div class="columns is-multiline box">
            <div class="column is-full box has-background-primary">
                <h3 class="title is-3">推荐讲师</h3>
            </div>
            {# 讲师列表 #}
            <div class="column is-full">
                <div class="columns is-multiline">
                    {# 讲师列表 #}
                    {% for teacher in teachers %}
                        <div class="column is-3-desktop">
                            <div class="card">
                                <div class="card-content has-background-primary">
                                    <div class="media">
                                        <div class="media-left">
                                            <figure class="image is-48x48">
                                                <a href="{% url 'org:teacher_detail' teacher.id %}">
                                                    <img class="is-rounded"
                                                         src="{{ MEDIA_URL }}{{ teacher.avatar }}"
                                                         alt="Placeholder image">
                                                </a>
                                            </figure>
                                            </a>
                                        </div>
                                        <div class="media-content">
                                            <p class="title is-4">
                                                <a href="{% url 'org:teacher_detail' teacher.id %}"
                                                   class="has-text-link-light">
                                                    {{ teacher.name }}
                                                </a>
                                            </p>
                                            <p class="subtitle is-6">{{ teacher.characteristic }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-content columns is-multiline">
                                    <div class="column is-full box has-background-primary">
                                        <strong>点击数<i class="fa fa-hand-pointer-o"
                                                      aria-hidden="true"></i>
                                            ：{{ teacher.click_nums }}</strong>
                                    </div>
                                    <div class="column is-full box has-background-primary">
                                        <strong>收藏数<i class="fa fa-star" aria-hidden="true"></i>
                                            ：{{ teacher.fav_nums }}</strong>
                                    </div>
                                    <div class="column is-full box has-background-primary">
                                        <strong>课程数<i class="fa fa-book" aria-hidden="true"></i>
                                            ：{{ teacher.course_nums }}</strong>
                                    </div>
                                    <div class="column is-full box has-background-primary">
                                        <strong>工作年限<i class="fa fa-sun-o" aria-hidden="true"></i>
                                            ：{{ teacher.work_years }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <hr class="hr-style">
        <br>

    </main>
{% endblock content %}
